<template>
	<view class="unio2o-page-has-bg">
		<view class="unio2o-jb-bg"></view>
		<view class="unio2o-main">
			<view class="pd30">
				
				<view v-if="status == 0" class="flex space alcenter text-w">
					<view>
						<text class="iconfont icon_order ft24"></text>
						<text class="ft16 ftw600 ml20">待付款</text>
					</view>
					<view class="ft14">
						<unio2o-countdown-orderpay @end="status = 4" :t="0"></unio2o-countdown-orderpay>
					</view>
				</view>
				<view v-if="status == 1" class="flex space alcenter text-w">
					<view v-if="refund == false">
						<text class="iconfont icon_order2 ft24"></text>
						<text class="ft16 ftw600 ml20">待核销</text>
					</view>
					<view v-if="refund == true">
						<view v-if="refundStatus == 0">
							<text class="iconfont icon_order3 ft24"></text>
							<text class="ft16 ftw600 ml20">申请退款中</text>
						</view>
						<view v-if="refundStatus == 1">
							<text class="iconfont icon_order5 ft24"></text>
							<text class="ft16 ftw600 ml20">等待到帐</text>
						</view>
						<view v-if="refundStatus == 2">
							<text class="iconfont icon_order4 ft24"></text>
							<text class="ft16 ftw600 ml20">拒绝退款</text>
						</view>
					</view>	
				</view>
				<view v-if="status == 4" class="flex space alcenter text-w">
					<view>
						<text class="iconfont icon_order1 ft24"></text>
						<text class="ft16 ftw600 ml20">已取消</text>
					</view>
				</view>
				<view v-if="status == 8" class="flex space alcenter text-w">
					<view v-if="refund == true">
						<text class="iconfont icon_order5 ft24"></text>
						<text class="ft16 ftw600 ml20">退款已完成</text>
					</view>
					<view v-if="refund == false">
						<view v-if="isComment == false">
							<text class="iconfont icon_order6 ft24"></text>
							<text class="ft16 ftw600 ml20">待评价</text>
						</view>
						<view v-else>
							<text class="iconfont icon_order7 ft24"></text>
							<text class="ft16 ftw600 ml20">已完成</text>
						</view>
					</view>	
				</view>
				
				<view class="box-shadow bdr16 pd30 bg-w mt30">
					<view class="flex">
						<view class="wh80">
							<image class="wh80 bdr8" :src="''"></image>
						</view>
						<view class="ws80 pl30">
							<view class="ft16 text-main">得力炫彩棒蜡笔旋转油画棒…</view>
							<view class="flex space alcenter mt20">
								<view>
									<text class="ft14 text-info">单价：</text>
									<text class="ft14 text-main">￥299</text>
								</view>
								<text class="ft14 text-info">x1</text>
							</view>
							<view v-if="orderType == 0 && status > 0" class="flex space alcenter mt20">
								<view>
									<text class="ft14 text-info">优惠：</text>
									<text class="ft14 text-main">￥5</text>
								</view>
								<view>
									<text class="ft14 text-info">实付：</text>
									<text class="ft18 ftw600 text-theme">￥200</text>
								</view>
							</view> 
							
							<view v-if="orderType == 1 && status > 0" class="flex alcenter mt20">
								<image class="wh20" :src="'icon_diamond'"></image>
								<text class="ft16 ftw600 text-theme ml10">1000 + ￥50</text>
							</view>
							
							<view v-if="status == 0" class="ft14 text-info mt20">
								<text>待支付金额：</text><text class="ft16 ftw600 text-theme ml10">￥100</text>
							</view>
						</view>	
					</view>
				</view>
				
				<view v-if="isQrcode == true" class="mt30 pd30 bdr16 bg-w box-shadow">
					<view class="ft18 ftw600 text-default">
						核销券码
					</view>
					<view class="ft14 flex alcenter space text-info mt20">
						<text>未使用（1张）</text>
						<text>已使用（0张）</text>
					</view>
					
					<view class="mt40 text-center qrcode-box">
						<view v-if="isOver" class="cover"></view>
						<image class="qrcode-img big" :src="''"></image>
					</view>
					<view class="text-notice ft14 mt40 text-center">
						请出示二维码给商家扫码销券
					</view>
				</view>
				
				
				<view class="mt30">
					<unio2o-store-card :full="true"></unio2o-store-card>
				</view>
				
				<view class="mt30 bg-w bdr16 pd30">
					<view class="ft18 ftw600 text-default pt20">订单信息</view>
					<view class="flex space alcenter mt50 ft16">
						<text class="text-info">订单编号</text>
						<text class="text-main">1034568888</text>
					</view>
					<view class="flex space alcenter mt50 ft16">
						<text class="text-info">联系人</text>
						<text class="text-main">张华 13515608638</text>
					</view>
					<view class="flex space alcenter mt50 ft16 mb20">
						<text class="text-info">支付方式</text>
						<text class="text-main">未支付</text>
					</view>
				</view>
				
				<view class="mt30 bg-w bdr16 pd30">
					<view class="ft18 ftw600 text-default pt20">温馨提示</view>
					<view class="flex space alcenter mt50 ft16">
						<text class="text-info">有效期</text>
						<text class="text-main">2018.07.31-2019.07.31</text>
					</view>
					<view class="flex space alcenter mt50 ft16">
						<text class="text-info">使用时间</text>
						<text class="text-main">11:30-14:30，17:30-20:30</text>
					</view>
					<view class="flex space alcenter mt50 ft16 mb20">
						<text class="text-info">适用范围</text>
						<text class="text-main">全店通用</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="isAction" class="tuan-order-footer-h">
			<view class="tuan-order-footer bg-w box-shadow-top">
				<view class="tuan-order-main flex center alcenter">
					<view v-if="status == 8 && refund == false" class="btn-mid-empty mr20">再来一单</view>
					<view v-if="status == 0" class="btn-mid-empty mr20">取消订单</view>
					<view v-if="status == 0" class="btn-mid mr20">立即支付</view>
					<view v-if="status == 1 && refund == false" class="btn-mid-empty mr20">申请退款</view>
					
					<navigator url="/pages/member/order/comment" v-if="status == 8 && refund == false && isComment == false " >
						<view class="btn-mid-empty mr20">去评价</view>
					</navigator>
					<view v-if="status == 1 && refund == true && refundStatus == 0" class="btn-mid-empty mr20">放弃申请</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import  unio2oStoreCard  from '@/components/module/store/card.vue';
	import unio2oCountdownOrderpay from '@/components/base/countdown/orderpay.vue';
	export default{
		components:{
			unio2oStoreCard,
			unio2oCountdownOrderpay
		},
		computed:{
			isOver(){
				let over = false;
				if(this.status == 8){
					over = true;
				}
				if(this.status == 1 && this.refund == true){
					over = true;
				}
				return over;
			},
			isQrcode(){
				let show = false;
				if(this.status == 1  || this.status == 8){
					show = true;
				}
				return show;
			},
			isAction(){
				let status = true;
				if(this.status == 4){
					status = false;
				}else if(this.status == 1){
					if(this.refund == true && this.refundStatus != 0){
						status = false;
					}
				}else if(this.status == 8){
					
					if(this.refund == true){
						status = false;
					}
				}
				return status;
			}
		},
		data(){
			return {
				orderType:1,
				status:8,
				refund:false,
				refundStatus:0,
				isComment:false,
			}
		}
	}
</script>

<style>
	.qrcode-box{
		position: relative;
	}
	.qrcode-box .cover{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		background: rgba(255,255,255,.9);
	}
	.tuan-order-footer-h{
		height: calc(144rpx + env(safe-area-inset-bottom));
	}
	
	.tuan-order-footer{
		position: fixed;
		z-index: 100;
		height: calc(144rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.tuan-order-main{
		height: 144rpx;
	}
</style>